<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
            width: 800px;
            /* height: 400px; */


            border-spacing: 5px;
            table-layout: fixed;

            /* 文本对齐方式 */
            text-align: center;
            /* 行高 => 一行文本占据的高度 */
            line-height: 40px;



        }

        /* 群组选择器: 同时选中多个元素,添加样式 */
        td {
            /* 边框: 变量的宽度  边框的样式(实线)  边框的颜色 */
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <!-- table>tr*9>td*9{$} -->
    <table id="table"></table>
</body>
<script>
    // 打印九九乘法表和字符串拼接
    var table = document.getElementById("table");

    var html = ""; //拼接所有的字符串

    var i = 1;
    while (i <= 9) {

        html = html + "<tr>";

        var j = 1;
        while (j <= i) { // i =>  1  2  3
            // html = html + "<td>";
            // html = html + (j + "x" + i + "=" + i * j )
            // html = html + "</td>";

            html += "<td>" + (j + "x" + i + "=" + i * j ) +"</td>";

            j++;
        }

        html = html + "</tr>";

        i++;
    }
    console.log(html);
    table.innerHTML = html;






</script>

</html>